<script setup lang="ts">
import { ElTable } from 'element-plus';
import { dayMap } from '@/views/Base/WorkCalendar/common';
import hoursDialog from '../../hours/index.vue';
import type { WorkingDayPeriods } from '@/api/base/workCalendar/shiftSystem/model/type';

const props = defineProps<{
    tableData: WorkingDayPeriods[];
    isEdit: boolean;
    isCheck?: boolean;
}>();

const emit = defineEmits(['update']);

/**
 * @: 切换选中
 */
const workingDays = ref<number[]>();
const selection = (selectList: WorkingDayPeriods[]) => {
    workingDays.value = selectList.map(item => item.workingDay);
};

/**
 * @: 默认选中
 */
const tableRef = ref<InstanceType<typeof ElTable>>();
const defaultSelection = () => {
    const { tableData, isEdit, isCheck } = props;
    tableData.forEach((item, i) => {
        if (isEdit || isCheck) {
            if (item.periodDesc) {
                tableRef.value?.toggleRowSelection(item, true);
                close();
            }
        } else {
            if (i === props.tableData.length - 1) return;
            tableRef.value?.toggleRowSelection(item, true);
            close();
        }
    });
};

const close = watch(
    () => props.tableData,
    () => {
        defaultSelection();
    }
);

// 更新当前行还是选中行
let updateTarget = 'row';
let rowWorkingDay: number | null;

/**
 * @: 打卡选择时段
 */
const hoursRef = ref<InstanceType<typeof hoursDialog>>();
const openHoursDialog = (row?: WorkingDayPeriods) => {
    if (row) {
        updateTarget = 'row';
        rowWorkingDay = row.workingDay;
    } else {
        updateTarget = 'all';
        rowWorkingDay = null;
    }
    hoursRef.value?.open();
};

/**
 * @: 更新工作时段
 */
const update = (periodDesc: string, id: number) => {
    const updateData = updateTarget === 'row' ? [rowWorkingDay] : workingDays.value;
    emit('update', periodDesc, id, updateData);
};

/**
 * @: 判断行内显示内容
 */
const placeholder = (day: number) => {
    return workingDays.value?.includes(day)
        ? ' <span style="color: #ccc">请更改工作时段</span> '
        : '休息';
};

onMounted(() => {
    defaultSelection();
});

defineExpose({
    workingDays
});
</script>

<template>
    <div class="top-table">
        <div class="f14 light">
            注：6月30号及之前更新班制，工作日历将更新至当年12月31日；6月30日后更新或未更新班制，工作日历将更新至次年12月31日；
        </div>
        <div class="top-table__setHours f14 m-t-16 m-b-16">
            <div class="top-table__setHours--link">
                <span>快捷设置工作时段：</span>
                <el-link type="primary" :disabled="isCheck" @click="openHoursDialog()">
                    批量更改工作时段
                </el-link>
            </div>
            <div class="light">系统默认周一至周六为工作日</div>
        </div>

        <el-table
            ref="tableRef"
            row-key="workingDay"
            :header-cell-style="{ height: '32px' }"
            :row-style="{ height: '44px' }"
            :data="tableData"
            :un-action="true"
            @selection-change="selection"
        >
            <el-table-column
                type="selection"
                :selectable="() => !isCheck"
                width="40"
                :reserve-selection="true"
            />

            <!-- 工作日 -->
            <el-table-column label="工作日" prop="workingDay" width="100">
                <template #default="{ row }">
                    {{ dayMap[row.workingDay] }}
                </template>
            </el-table-column>

            <!-- 工作时段 -->
            <el-table-column label="工作时段" prop="periodId">
                <template #default="{ row }">
                    <div v-html="row.periodDesc || placeholder(row.workingDay)" />
                </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-link :disabled="isCheck" type="primary" @click="openHoursDialog(row)">
                        更改工作时段
                    </el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 选择时段弹框 -->
        <hours-dialog ref="hoursRef" @update="update" />
    </div>
</template>

<style scoped lang="scss">
@include b(top-table) {
    @include e(setHours) {
        display: flex;
        justify-content: space-between;

        @include m(link) {
            display: flex;
            align-items: center;
        }
    }
}

@include b(light) {
    color: var(--q-text-color-secondary);
    opacity: 0.8;
}
</style>
